    // 搜索引擎
    const inp = document.querySelector('.textList')
    const ul = document.querySelector('.textLink')

    inp.addEventListener('input',() =>{
      // 拿到书写内容
      const text = inp.value.trim()
      console.log(text);
      // 发送请求
      const script = document.createElement('script')
      // 添加地址
      script.arc = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34653,34443,34552,34004,34600,34585,34092,34107,34662,26350,34627,22159,34691,34675&wd=${ text }&req=2&csor=6&pwd=aiqiy&cb=fn&_=1631842921941`
      // 把script标签插入到页面中
      document.body.appendChild(script)
      // 删除script标签，卸磨杀驴
      script.remove()
    })
    // 准备函数
    function fn (res){
      // 没有模糊搜索，让ul隐藏
      if ( !res.g) return ul.style.display = 'none'
      // 有就渲染出来
      let str = ''
      res.g.forEach(item => {
        str += `<li>${ item.q }</li>`
        
      })
      ul.innerHTML = str
      ul.style.display = 'block'
    }

    // 运动函数move
    function move(ele, options, fn) {
      let count = 0
      for (let k in options) {
        count++
        if (k === 'opacity') options[k] *= 100
        const timer = setInterval(() => {
          // 1. 获取当前位置
          let current
          if (k === 'opacity') {
            current = window.getComputedStyle(ele)[k] * 100
          } else {
            current = parseInt(window.getComputedStyle(ele)[k])
          }

          // 2. 计算本次的运动距离
          let distance = (options[k] - current) / 10
          distance = distance > 0 ? Math.ceil(distance) : Math.floor(distance)

          // 3. 判断是否赋值
          if (current === options[k]) {
            clearInterval(timer)
            count--
            if (count === 0) fn && fn()
          } else {
            if (k === 'opacity') {
              ele.style[k] = (current + distance) / 100
            } else {
              ele.style[k] = current + distance + 'px'
            }
          }
        }, 20)
      }
    }
    
    // 获取元素
    const imgBox = document.querySelector('.bannerimg')
    console.log(imgBox.children.length);
    const banner = document.querySelector('.banner')
    const pointBox = document.querySelector('.point')
    // 拿到banner的宽给下面用,用client是不包含框的
    const banner_width = banner.clientWidth
    let index = 1
    let t1 
    let flag = true
    // 复制元素第一个和最后一个，封装成一个函数
    copy()
    function copy(){
      // 复制元素
      const beforeBox = imgBox.firstElementChild.cloneNode(true)
      const lastBox = imgBox.lastElementChild.cloneNode(true)
      console.log(beforeBox);
      // 把复制的添加进去
      imgBox.appendChild(beforeBox)
      imgBox.insertBefore(lastBox,imgBox.firstElementChild)
      // 重新设置一下样式宽
      imgBox.style.width = imgBox.children.length*100 + '%'
      // 设置一下位置靠左定位
      imgBox.style.left = -banner_width + 'px'
    }
    
    // 把焦点根据动态渲染出来
    setPoint()
    function setPoint(){
      // 拿到有多少个真正的轮播图，不包括前面和后面添加的
      const pointNum = imgBox.children.length - 2
      for( let i = 0; i < pointNum; i++){
        // 每循环一次依次添加一个标签li
        const li = document.createElement('li')
        // 给第一个li添加一个类名让其变紫
        if(i === 0){
          li.classList.add('active')
        }
        li.classList.add('item')
        li.dataset.point = i
        // 把生成的li一个个添加到焦点框中
        pointBox.appendChild(li)            

        // 重新设置一下焦点框的宽度、
      }
      pointBox.style.width = pointNum*(30 + 10) + 'px'
    }

    // 让轮播图动起来
    autoPlay()
    function autoPlay(){
      t1 = setInterval(function (){
        if(flag === false)return 
        flag = false
        index++
        move(imgBox,{left: -index *banner_width},moveEnd)
      },2000)
    }

    // 结束函数
    function moveEnd(){
      // 当轮播图到了最后一张的时候，跳转到第二张
      if(index === imgBox.children.length - 1){
        index = 1
        imgBox.style.left = -index*banner_width + 'px'
      }
      if(index === 0){
        index = imgBox.children.length - 2
        imgBox.style.left = -index*banner_width + 'px'
      }
      // 焦点也跟着变
      // 首先遍历焦点的所有子元素然后就是选项卡的逻辑，
      for(let i = 0; i < pointBox.children.length; i++){
        pointBox.children[i].classList.remove('active')
      }
      pointBox.children[index - 1].classList.add('active')
      flag = true
    }

    // 移入移出事件 当移入的时候，轮播图停止，移出的时候，继续轮播图
    overOut()
    function overOut(){
      banner.onmouseover = function(){clearInterval(t1)}
      banner.onmouseout = function(){autoPlay()}
    }

    // 点击事件上一张下一张焦点。利用事件委托
    bindEvent()
    function bindEvent(){
      banner.onclick = function(e){
        e = e || window.event
        let target = e.target || e.srcElement
        if(target.className === 'bannerleft'){
          if(flag === false)return
          flag = false
          index--
          move(imgBox,{left: -index *banner_width},moveEnd)
          // imgBox.style.left = -index * banner_width + 'px'
        }
        if(target.className === 'bannerright'){
          if(flag === false)return
          flag = false
          index++
          move(imgBox,{left: -index *banner_width},moveEnd)
          // imgBox.style.left = -index * banner_width + 'px'
        }
        if(target.className === 'item'){
          if(flag === false)return
          flag = false
          index = target.dataset.point - 0 + 1
          move(imgBox,{left: -index *banner_width},moveEnd)
        }
      }
    }
    tabChange()
    function tabChange() {
      // 7-1. 给 document 绑定 visibilitychange 事件
      document.addEventListener('visibilitychange', () => {
        // 离开的时候, 关闭定时器
        if (document.visibilityState === 'hidden') clearInterval(t1)
        // 回来的时候, 再次开启自动轮播
        if (document.visibilityState === 'visible') autoPlay()
      })
    }
 
    const baner = document.querySelectorAll('.baner')
    // const ul = document.querySelector('.ban')
    const ban1 = document.querySelector('.ban1')

    // 添加移入移出事件
    baner.forEach(item => {
      item.addEventListener('mouseover' , () => {
         ban1.style.display = 'block'
      })
      item.addEventListener('mouseout' , () => {
        ban1.style.display = 'none'
      })
    })
   
    // 去到列表页
const listInp = document.querySelector('.daoleft')
listInp.addEventListener('click' , () => {
  window.location.href = './list.html'
})

// 去到登录页
const login = document.querySelector('.login')
login.addEventListener('click', () => {
  window.location.href = './login.html'
})
// 去到注册页
const regist = document.querySelector('.regist')
regist.addEventListener('click', () => {
  window.location.href = './regist.html'
})
// 去到购物车页面
const cart = document.querySelector('.cartht')
cart.addEventListener('click', () => {
  window.location.href = './cart.html'
})